Programming Windows Phone 7 : Points and Pixels

FontSize="36"

But what exactly does this mean?

All dimensions in Silverlight are in units of pixels, and the FontSize is no exception. When you specify 36, you get a font that from the top of its ascenders to the bottom of its descenders measures approximately 36 pixels.

But fonts are never this simple. The resultant TextBlock will actually have a height more like 48 pixels—about 33% higher than the FontSize would imply. This additional space (called leading) prevents successive lines of text from jamming against each other.

Traditionally, font sizes are expressed in units of points. In classical typography, a point is very close to 1/72^nd inch but in digital typography the point is often assumed to be exactly 1/72^nd inch. A font with a size of 72 points measures approximately an inch from the top of its characters to the bottom. (I say “approximately” because the point size indicates a typographic design height, and it’s really the creator of the font who determines exactly how large the characters of a 72-point font should be.)

How do you convert between pixels and points? Obviously you can’t except for a particular output device. On a 600 dots-per-inch (DPI) printer, for example, the 72-point font will be 600 pixels tall.

Desktop video displays in common use today usually have a resolution somewhere in the region of 100 DPI. For example, consider a 21″ monitor that displays 1600 pixels horizontally and 1200 pixels vertically. That’s 2000 pixels diagonally, which divided by 21″ is about 95 DPI.

By default, Microsoft Windows assumes that video displays have a resolution of 96 DPI. Under that assumption, font sizes and pixels are related by the following formulas:

points = ¾ x pixels

pixels = 4/3 x points

Although this relationship applies only to common video displays, people so much enjoy having these conversion formulas, they show up in Windows Phone 7 programming as well.

So, when you set a FontSize property such as

FontSize="36"

you can also claim to be setting a 27-point font.

For a particular point size, increase by 33% to get a pixel size. This is what you set to the FontSize property of TextBlock. The resultant TextBlock will then be another 33% taller than the FontSize setting.

The issue of font size becomes more complex when dealing with high-resolution screens found on devices such as Windows Phone 7. The 480 x 800 pixel display has a diagonal of 933 pixels. The phone I used for this book has a screen with about 3½″ for a pixel density closer to 264 DPI. (Screen resolution is usually expressed as a multiple of 24.) Roughly that’s 2½ times the resolution of conventional video displays.

This doesn’t necessarily mean that all the font sizes used on a conventional screen need to be increased by 2½ times on the phone. The higher resolution of the phone—and the closer viewing distance common with phones—allows smaller font sizes to be more readable.

When running in a Web browser, the default Silverlight FontSize is 11 pixels, corresponding to a font size of 8.25 points, which is fine for a desktop video display but a little too small for the phone. For that reason, Silverlight for Windows Phone defines a collection of common font sizes that you can use. (I’ll describe how these work in Chapter 7.) The standard MainPage.xaml file includes the following attribute in the root element:

FontSize="{StaticResource PhoneFontSizeNormal}"

This FontSize is inherited through the visual tree and applies to all TextBlock elements that don’t set their own FontSize properties. It has a value of 20 pixels—almost double the default Silverlight FontSize on the desktop. Using the standard formulas, this 20-pixel FontSize corresponds to 15 points, but as actually displayed on the phone, it’s about 2/5 the size that a 15-point font would appear in printed text.

The actual height of the TextBlock displaying text with this font is about 33% more than the FontSize, in this case about 27 pixels.